<template>
    <!--题库-->
    <div class="contain">
        <div class="product-header">
        </div>
        <div class="main-box">
            <ul class="tabbar-box">
                <li class="tab"
                    v-for="(item,index) in firstLabList"
                    :key="index"
                    :class="{active: activeFirstLab.id === item.id}"
                    @click="changeTab(item)"
                >
                    {{item.first_name}}
                </li>
            </ul>
            <div class="com-box">
                <ul class="com-list">
                    <li class="secondLab-com"
                        v-for="item in secondLabList"
                        :key="item.id"
                    >
                        <div class="com-name">{{item.sec_name}}</div>
                        <div class="com-contain">
                            <div class="com-desc">收录了3000道题，其中包含随堂课练习、章节测试、智能组卷等多道题目，已有111111人已做过。</div>
                            <div class="com-link" @click="jumpToSndCom(item)">进入</div>
                        </div>
                    </li>
                    <li class="course-com"
                        v-for="item in courseList"
                        :key="item.id"
                    >
                        <div class="com-name">{{item.course_name}}</div>
                        <div class="com-contain">
                            <div class="com-desc">收录了3000道题，其中包含随堂课练习、章节测试、智能组卷等多道题目，已有111111人已做过。</div>
                            <div class="com-tag-box">
                                <div class="com-tag" @click="jumpToCourseCom(item, 3)">智能选题</div>
                                <div class="com-tag" @click="jumpToCourseCom(item, 1)">章节练习</div>
                                <div class="com-tag" @click="jumpToCourseCom(item, 2)">历年真题</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'QuestionBank',
    components: {
        /**/
    },
    data() {
        return {
            firstLabList: null,
            secondLabList: null,
            activeFirstLab: null,
            courseList: null
        };
    },
    watch: {
        /**/
    },
    mounted() {
        if(this.$util.authLogin()) {
            this.initPage();
        }
    },
    methods: {
        initPage(){
            this.ajaxGetZsList();
        },
        // 获取一级科目标签
        ajaxGetZsList() {
            let option = {
                pathName: 'doGetFLabs'
            };
            this.$api.ajaxData(option).then(res => {
                this.firstLabList = res.obj;
                if(this.firstLabList.length>0) {
                    this.activeFirstLab = this.firstLabList[0]
                    this.ajaxGetsubjectList();
                    this.ajaxCourseList();
                }
            });
        },
        // 获取二级科目标签
        ajaxGetsubjectList() {
            let option = {
                pathName: 'doGetSLabsById',
                params: {
                    fid: this.activeFirstLab.id
                }
            };
            this.$api.ajaxData(option).then(res => {
                this.secondLabList = res.obj;
            });
        },
        // 获取用户购买的课程
        ajaxCourseList() {
            let option = {
                pathName: 'getCourseListPC',
                authorization: true,
                method: 'post',
                errorFunc: false,
                data: {
                  firstLabName: this.activeFirstLab.first_name
                }
            };
            this.$api.ajaxData(option).then(res => {
                this.courseList = res.obj;
            }).catch(()=>{
                this.courseList = []
            });
        },
        // 切换tab
        changeTab(item){
            this.activeFirstLab = item
            this.ajaxGetsubjectList();
            this.ajaxCourseList()
        },
        // 打开二级目录的试卷
        jumpToSndCom(item) {
            let routeData = this.$router.resolve({ name: 'test', query: {
                type: 1,
                secName: item.sec_name
            }});
            window.open(routeData.href, '_blank');
        },
        // 打开课程的试卷
        jumpToCourseCom(item,index) {
            this.$router.push({name:'studyCenter', query: {
                page: 'qACenter',
                title: item.first_lab_name,
                courseId: item.id,
                type: index
            }})
        }
    }
};
</script>
<style scoped lang="scss">
.contain {
    .product-header {
        position: relative;
        padding: 80px 0;
        height: 233px;
        color: #fff;
        &:before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 233px;
            background: url('../../assets/image/back/u542.jpg') no-repeat;
            background-size: 100% 100%;
        }
    }
    .main-box {
        position: relative;
        top: -115px;
        padding: 35px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0,0,0,0.05);
        .tabbar-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 35px;
            font-size: 14px;
            color: #666;
            .tab {
                padding: 3px 10px;
                margin: 0 30px;
                text-align: center;
                font-weight: bold;
                cursor: pointer;
                &.active {
                    color: #007aff;
                    border-bottom: 2px solid #007aff;
                }
            }
        }
        .com-box {
            padding: 10px;
            .com-list {
                li {
                    width: calc(25% - 20px);
                    margin: 0 20px 20px 0;
                    float: left;
                    .com-name {
                        display: flex;
                        padding: 0 10px;
                        line-height: 1.1;
                        align-items: center;
                        justify-content: center;
                        height: 96px;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        font-size: 24px;
                        color: #fff;
                        background: #0592FE;
                    }
                    .com-contain {
                        padding: 14px;
                        border: 1px solid rgb(228, 228, 228);
                        border-top: 0;
                        font-size: 13px;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        background: #fff;
                        box-sizing: border-box;
                        .com-link {
                            margin: 10px auto 0;
                            width: 91px;
                            line-height: 30px;
                            text-align: center;
                            border-radius: 5px;
                            color: #fff;
                            background: #5625EE;
                            cursor: pointer;
                            &:hover {
                                opacity: 0.8;
                            }
                        }
                        .com-tag-box {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin: 14px auto 4px;
                            .com-tag {
                                height: 22px;
                                line-height: 22px;
                                padding: 0 8px;
                                margin: 0 3px;
                                font-size: 11px;
                                color: #007aff;
                                border-radius: 11px;
                                border: 1px solid #007aff;
                                text-align: center;
                                cursor: pointer;
                                white-space: nowrap;
                                &:hover {
                                    opacity: 0.8;
                                }
                            }
                        }
                    }
                    &:after {
                        content: '';
                        display: block;
                        clear: both;
                    }
                }
            }
        }
    }

}
</style>
